import $ from 'jquery'
import FastClick from 'fastclick'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

// 样式表
import './index.less'

// fastclick
$(() => {
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function () {
      FastClick.attach(document.body);
    }, false);
  }
})

// params 初始化
const type = [
  { id: 0, pageIndex: 0, new: false, value: 'topNews' },
  { id: 1, pageIndex: 0, new: true, value: 'recommend' },
  { id: 2, pageIndex: 0, new: true, value: 'phoenix' }
]
const global = {
  origin: 'tencent',
  tabIndex: 0
}

// 初始化轮播图
const swiper = new Swiper('.swiper-banner', {
  pagination: {
    el: '.swiper-pagination-banner',
  },
  autoplay: true,
  loop: true,
})

// 初始化tab标签页swiper
var tabSwiper = new Swiper('.swiper-content', {
  on: {
    slideChangeTransitionEnd() {
      $('.tab').removeClass('tab-sel')
      $('.tab')[this.activeIndex].classList.add('tab-sel')
      getData(this.activeIndex)
    }
  }
})

// tab标签页切换
$(document).on('click', '.tab', e => {
  let el = e.target
  $('.tab').removeClass('tab-sel')
  el.classList.toggle('tab-sel')
  tabSwiper.slideTo(el.dataset.id, 1000, false)
  getData(el.dataset.id)
})

// getData获取数据
function getData(v) {
  if (v < 2) {
    global.origin = 'tencent'
  } else {
    global.origin = 'phoenix'
  }
  global.tabIndex = v
  checkScroll()

}

// 获取当前滚动条位置

function getScrollTop() {
  return $('.cells')[global.tabIndex].scrollTop
}

function getClientHeight() {
  return $('.cells')[global.tabIndex].clientHeight
}

function getScrollHeight() {
  return $('.cells')[global.tabIndex].scrollHeight
}


// 监听滚动事件
let flag = false
$('.cells').on('scroll', checkScroll)

function checkScroll() {
  if (getScrollTop() + getClientHeight() >= getScrollHeight()) {
    if (!flag) {
      flag = true
      if (!type[global.tabIndex].new) {
        type[global.tabIndex].pageIndex += 1
      }
      loadListMore()
    }
  }
}

// 获取轮播图数据
function getBanner() {
  $.ajax({
    url: 'https://pacaio.match.qq.com/xw/getAllHotEvent?num=4',
    dataType: 'jsonp',
    data: {
      num: 4,
      refresh: 0
    },
    success(res) {
      const focus = res.focus
      if (focus) {
        swiper.removeAllSlides()
        focus.forEach(i => {
          swiper.appendSlide(
            `
            <div class="swiper-slide" >
              <img alt="${i.keywords}" src="${i.img}" />
              <p>
                <a href="${i.url}">${i.title}</a>
              </p>
            </div>
          `
          )
        })
      }
    }
  })
}
getBanner()


// 百度搜索
$('#index-bn').on('click', e => {
  if($('#word').val()!=='9999') {
    window.location = 'https://m.baidu.com/s?word='+$('#word').val()
  }
})


// 获取列表数据
loadListMore()

function loadListMore(pageIndex) {
  flag = true;
  if (global.origin === 'tencent') {
    $.ajax({
      url: 'https://pacaio.match.qq.com/xw/' + type[global.tabIndex].value,
      dataType: 'jsonp',
      data: {
        num: 20,
        refresh: type[global.tabIndex].pageIndex
      },
      success: getListDatacallback
    })
  } else {
    let dataSourceId = 32;
    let pageIndex = type[global.tabIndex].pageIndex
    if ($($(".cells")[global.tabIndex]).find('>.cell:last').text() != "疯狂加载中...") $($(".cells")[global.tabIndex]).append('<div class="default_loadtext"><div><p>疯狂加载中...</p></div></div>');
    var url = 'https://inews.ifeng.com/' + dataSourceId + '_' + pageIndex + '/data.shtml';
    $.getScript(url);
  }
}

function getListDatacallback(data) {
  if (data && data != '') {
    let el = ''
    if (global.origin === 'tencent') {
      data.data && data.data.forEach(i => {
        el += `
        <a class="cell cell_access" href="${i.surl}">
          <div class="cell__hd"><img src="${i.img}" alt="" style="margin-right:5px;display:block" /></div>
          <div class="cell__bd">
            <p>${i.title}</p>
          </div>
        </a>
      `
      })
    } else {
      data.forEach(i => {
        el += `
        <a class="cell cell_access" href="${i.docUrl}">
          <div class="cell__hd"><img src="http://${i.i_thumbnail}" alt="" style="margin-right:5px;display:block" /></div>
          <div class="cell__bd">
            <p>${i.title}</p>
          </div>
        </a>
      `
      })
    }
    $($(".cells")[global.tabIndex]).append(el)
    $(".default_loadtext").each(function () {
      $(this).remove();
    });
  }
  flag = false
}

window.getListDatacallback = getListDatacallback